<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" label-position="left">
      <div class="title">hello !</div>
      <div class="title-tips">欢迎来到 kebol_admin !</div>
      <el-form-item prop="username">
        <el-input v-model.trim="loginForm.username" placeholder="请输入用户名" tabindex="1" type="text" spellcheck =false>
          <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input :key="passwordType" ref="password" v-model.trim="loginForm.password" :type="passwordType" tabindex="2" placeholder="请输入密码" @keyup.enter.native="handleLogin" spellcheck =false>
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          <i slot="suffix" class="el-input__icon el-icon-view" @click="handlePassword"></i>
        </el-input>
      </el-form-item>
      <el-checkbox-group v-model="loginForm.isRememberMe">
        <el-checkbox class="isRememberMe" true-label=1 false-label=0>七天内免登录</el-checkbox>
      </el-checkbox-group>
      <el-button :loading="loading" style="width:100%;margin-bottom:30px;" class="login-btn" type="primary" @click="handleLogin">
        登录
      </el-button>
    </el-form>
  </div>
</template>

<script>
import { isPassword } from '@/utils/validate'

export default {
  name: 'Login',
  directives: {
    focus: {
      inserted(el) {
        el.querySelector('input').focus()
      },
    },
  },
  data() {
    const validateusername = (rule, value, callback) => {
      if ('' == value) {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码不能少于6位'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '',
        password: '',
        isRememberMe: 0
      },
      rules: {
        username: [
          {
            required: true,
            trigger: 'blur',
            validator: validateusername,
          },
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            validator: validatePassword,
          },
        ],
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = (route.query && route.query.redirect) || '/'
      },
      immediate: true,
    },
  },
  created() {
    document.body.style.overflow = 'hidden'
  },
  beforeDestroy() {
    document.body.style.overflow = 'auto'
  },
  methods: {
    handlePassword() {
      this.passwordType === 'password'
        ? (this.passwordType = '')
        : (this.passwordType = 'password')
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {  //调用actions
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login-container {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background-image: url("https://team-pic.oss-cn-beijing.aliyuncs.com/simple-blog/1639660702147.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

  .login-form {
    background: url("~@/assets/login_form.png");
    padding: 35px 35px 15px 35px;
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);

    .title {
      font-size: 54px;
      font-weight: 500;
      color: rgb(221, 221, 221);
    }

    .title-tips {
      margin-top: 5px;
      font-size: 26px;
      font-weight: 400;
      color: rgb(221, 221, 221);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .isRememberMe {
      color: #889aa4;
      margin-bottom: 15px;
    }
  }
  .svg-container {
    position: absolute;
    top: 14px;
    left: 15px;
    z-index: 999;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }

  .show-password {
    position: absolute;
    top: 14px;
    right: 25px;
    font-size: 16px;
    color: #d7dee3;
    cursor: pointer;
    user-select: none;
  }

  ::v-deep {
    .el-form-item {
      padding-right: 0;
      margin: 20px 0;
      color: #454545;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;

      &__content {
        min-height: 32px;
        line-height: 32px;
      }

      &__error {
        position: absolute;
        top: 100%;
        // left: 18px;
        font-size: 12px;
        line-height: 18px;
        color: #ff4d4f;
      }
    }

    .el-input {
      box-sizing: border-box;
      input {
        padding-left: 45px;
        font-size: 14px;
        line-height: 58px;
        color: #606266;
        background: #f6f4fc;
        border: 0;
        caret-color: #606266;
      }
      i {
        color: rgb(22, 22, 22);
      }
    }
  }
}
</style>
